<template>
    <!-- 数字资源 -->
    <div class="local-newspaper-box full-background">
        <div class="contain">
            <div class="content-box">
                <!--标题、查看更多-->
                <div class="guide-item">
                    <icon-title :text="'数字资源'"><a-icon class="icon" type="appstore" /></icon-title>
<!--                    <look-more class="look-more"/>-->
                </div>
                <div class="content-item">
                    <div class="info-list-box">
                        <!--内容列表-->
                        <link-label
                            class="info-item"
                            text="红色故事绘"
                            v-for="(item, index) in resourceDataList"
                            :key="index"
                            :resource-data="item"
                        />

                    </div>
                </div>
            </div>
            <router-link class="slip-down-box" :to="{path:'/ServiceGuide', query:{code:'service-guide'}}">
                <a-icon class="down-img" type="double-right"/>
            </router-link>
        </div>
    </div>
</template>

<script>
import IconTitle from "../../components/ToolComponent/IconTitle";
// import LookMore from "../../components/ToolComponent/LookMore";
import LinkLabel from "../../components/SourseDataComponent/Label/LinkLabel"
import LoadTopicPageDataMixin from "@/mixins/LoadTopicPageDataMixin";

//数字资源栏目code
const CODE = "digital-resources";
export default {
    name: "DigitalResources",
    data(){
        return{
            resourceDataList:[]
        }
    },
    components:{
        IconTitle,
        // LookMore,
        LinkLabel
    },
    mixins:[
        //获取子栏目资源
        LoadTopicPageDataMixin,
    ],
    created() {
        //设置栏目code
        this.setPageDataCode(CODE);
        //设置页面大小
        this.setPageSize(28);
        //加载栏目数据
        this.loadPageData(1).then(() => {
            this.resourceDataList = this.pageData.records;
        });
    }
}
</script>

<style lang="less" scoped>
@import "../../assets/global.less";
//phone
@media only screen and (max-width: 576px){
    @width:100vw;
    @min-height:100vh;
    .local-newspaper-box{
        background-image: url("../../assets/Phone-BackgroundImage/DigitalResourse.png");
        background-repeat: no-repeat;
        background-position-x: center;
        width:@width;
        min-height:100vh;
        .contain{
            width:@width;
            min-height:100vh;
            display:grid;
            grid-template-rows: repeat(10, 1fr);
            grid-template-columns: repeat(10, 1fr);
            .content-box{
                @content-width: calc(@width / 10 * 8);
                @content-height:calc(@min-height / 10 * 5);
                grid-row: 2 / span 8;
                grid-column: 2 / span 8;
                width: @content-width;  //80vw
                max-height:calc(@min-height / 10 * 8);
                height: @content-height;
                background-color: white;
                border-radius:1vw;
                display:flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
                //标题、查看更多
                .guide-item{
                    width:calc(@content-width - 6vw);  //100vw
                    height:7vw;
                    display:flex;
                    justify-content: space-between;
                    .icon{
                        line-height:7vw;
                        font-size:4vw;
                        color:rgba(15, 121, 205, 1);
                    }
                    .look-more{
                        height:7vw;
                    }
                }
                //内容列表
                .content-item{
                    width:calc(@content-width - 6vw); //80vw - 6vw
                    min-height:calc(@content-height - 10vw); //144vw - 100vw
                    border-top: 1px solid rgba(15, 121, 205, 1);
                    display:flex;
                    justify-content: center;
                    align-items: flex-start;
                    padding-top: 5vw;
                    .info-list-box{
                        width:calc(@content-width - 10vw); //80vw - 10vw
                        max-height:calc(@min-height / 10 * 8 - 19vw);
                        height:calc(@content-height - 19vw);//144vw - 19vw
                        overflow: hidden;
                        display:flex;
                        place-content: flex-start;
                        flex-wrap: wrap;
                        .info-item{
                            margin:2vw;
                        }
                    }
                }
            }
            .slip-down-box{
                grid-row:10 / span 1;
                grid-column: 2 / span 8;
                width:calc(@width / 10 / 3 * 2);
                height:calc(@width / 10);
                place-self: center;
                transform: rotate(90deg);
                font-size: calc(@width / 10 / 3 * 2);
                .down-img{
                    color:RGBA(122, 128, 118, 1);
                }
            }

        }
    }

}

//pc
@media only screen and (min-width: 576px){
    @width:900px;
    @height:360px;
    .local-newspaper-box{
        background-image: url("../../assets/PC-BackgroundImage/digital-resourse.png");
        .contain {
            .container;
            display:grid;
            grid-template-rows: 1.5fr 4fr 1fr;
            .content-box{
                grid-row:2 / span 1;
                grid-column: 1 / span 1;
                width: @width;  //900px
                height:@height;  //360px
                justify-self: center;
                background-color: white;
                border-radius:10px;
                display:flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                //标题、查看更多
                .guide-item{
                    width:calc(@width - 20px);  //900px - 20px
                    height:30px;
                    display:flex;
                    justify-content: space-between;
                    .icon{
                        line-height:20px;
                        font-size:18px;
                        color:rgba(15, 121, 205, 1);
                    }
                    .look-more{
                        height:30px;
                    }
                }
                //内容列表
                .content-item{
                    width:calc(@width - 20px); //900px - 20px
                    height:calc(@height - 50px); //360px - 50px;
                    border-top: 1px solid rgba(15, 121, 205, 1);
                    padding:10px 30px;
                    .info-list-box{
                        width:calc(@width - 80px); //900px - 80px
                        height:calc(@height - 70px);//360px - 70px;
                        display:flex;
                        place-content: flex-start;
                        flex-wrap: wrap;
                        overflow:auto;
                        .info-item{
                            margin:10px;
                        }

                    }
                }
            }
            .slip-down-box{
                display:none;
            }

        }
    }
}

</style>
